<template>
	<div class="lesson_subject">
		<img class="content_background" :src="contentBackground" alt="" />
		<!--    顶部返回按钮-->
		<div class="head_return" @click="headReturn"></div>
		<div class="subject_top">
			<img :src="topBack" alt="" />
		</div>

		<div class="subject_con" @click="goNext()">
			<kefu :letters="letters" :type="type"></kefu>
			<!--      <div class="con_mess" >
              <span>hi,小雨同学</span> <span style="height: .1rem; display: block"></span>
              <anim-word :text="letters" @poof="rem"></anim-word>
            </div>
            <div class="con_guide" @click="goNext()"></div> -->
		</div>
	</div>
</template>

<script>
	import kefu from "../../components/kefu/index.vue";
	import AnimWord from "../../components/animWord";

	export default {
		name: "lessonTest",
		components: {
			AnimWord,
			kefu,
		},
		data() {
			return {
				letters: "",
				contentBackground: "",
				topBack: "",
				id: "",
				type: null,
				// 页面跳转时间
				jumpPageTime: null,
			};
		},

		mounted() {
			console.log(this.$route.query.class);
			this.type = this.$route.query.class;

			this.renderpage(this.type);
			// 前往新页面
			this.jumpPage(7000, this.type);
		},
		beforeDestroy() {
			clearTimeout(this.jumpPageTime);
		},
		methods: {
			renderpage(n) {
				//根据题型获取不同显示图片
				this.contentBackground = this.$imgData[n].contentBackground
				this.topBack = this.$imgData[n].topBack
				this.letters =  this.$imgData[n].letters

	

				//获取配置
				this.$request
					.get("getReadSpanConfig", {})
					.then((res) => {
						this.frameList[0].content = res.data.data.training;
						this.frameList[1].content = res.data.data.arrange;
						this.frameList[2].content = res.data.data.answer_time + "分钟";
					})
					.catch((err) => {
						// this.$message({
						//           message: '警告哦，这是一条警告消息',
						//           type: 'warning'
						//         });
					});
			},
			goNext() {
				if (this.type == "wordlogic") {
					//概括力
					this.$router.push({
						path: "/lessonShow",
						query: {
							class: this.type
						}
					});
				} else {
					//阅读广度
					this.$router.push({
						path: "/lessTopic",
						query: {
							class: this.type
						}
					});
				}
			},
			// 跳转新页面
			jumpPage(time, type) {
				clearTimeout(this.jumpPageTime);

				this.jumpPageTime = setTimeout(() => {
					this.goNext();
				}, time);
			},

			// goNext() {
			//   if (this.type == 2) {
			//     this.$emit("showloading", {
			//       methods: 'push',
			//       path: '/lessonShow',
			//       query: {
			//         class: 2
			//       }
			//     })
			//   } else {
			//     this.$emit("showloading", {
			//       methods: 'push',
			//       path: '/lessTopic',
			//       query: {
			//         class: 1
			//       }
			//     })
			//   }
			// },
			// 返回上一页
			headReturn() {
				this.$router.go(-1);
			},
			// 动画
			rem(letter) {
				this.letters = this.letters.map(function(item) {
					if (item.char === letter) {
						item.alive = false;
					}
					return item;
				});
			},
		},
		watch: {},
	};
</script>
<style lang="less" scoped>
	.lesson_subject {
		position: relative;
		height: 100vh;
		font-size: 0.16rem;
		color: #fff;
		// background: url("../../assets/image/lesson/lesback.png") no-repeat;
		background-size: 100% 100%;

		.content_background {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			// z-index: -1;
		}

		.head_return {
			position: absolute;
			top: 0.3rem;
			left: 0.4rem;
			width: 0.7rem;
			height: 0.7rem;
			background: url("../../assets/image/lesson/return.png") no-repeat;
			background-size: 100% 100%;
			cursor: pointer;

			&>img {
				width: 100%;
				height: 100%;
			}
		}

		.subject_top {
			margin: 0 auto;
			margin-left: 42%;
			width: 3.66rem;
			height: 2.06rem;
			position: relative;
			// background: url("../../assets/image/lesson/breadth.png") no-repeat;
			background-size: 100% 100%;

			&>img {
				width: 88%;
				height: 100%;
			}
		}

		.subject_con {
			position: relative;
			margin: 0 auto;
			margin-top: 2.63rem;
			width: 2.6rem;

			.con_mess {
				box-sizing: border-box;
				padding: 0.2rem;
				width: 100%;
				height: 1.58rem;
				font-size: 0.16rem;
				background: url("../../assets/image/lesson/mess.png");
				background-size: 100% 100%;
			}

			.con_guide {
				width: 2.06rem;
				height: 2.24rem;
				margin: 0 auto;
				background: url("../../assets/image/lesson/questions.gif");
				background-size: 100% 100%;
				box-sizing: border-box;
			}
		}
	}
</style>
